<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'ExamManager' }"
            >科目管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>考场管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row style="padding: 10px 20px 0">
      <el-tabs v-model="tabsActiveName" :lazy="true" @tab-click="handleClick">
        <el-tab-pane label="管理员列表" name="examinerList">
          <div class="examiner_manager_content">
            <!-- 按钮栏 -->
            <el-row>
              <el-col :span="24">
                <div class="examiner_manager_top">
                  <el-button size="mini" type="primary" @click="addFn()"
                    >添加</el-button
                  >
                  <el-button size="mini" type="primary" @click="openQrCode(1)"
                    >管理员申请二维码</el-button
                  >
                  <el-button size="mini" type="primary" @click="openQrCode(2)"
                    >考场管理二维码</el-button
                  >
                </div>
              </el-col>
            </el-row>
            <!-- 数据列表 -->
            <div
              v-if="
                examinerlistData != undefined && examinerlistData.length > 0
              "
            >
              <el-row>
                <el-col :span="24">
                  <el-table
                    :data="examinerlistData"
                    border
                    size="mini"
                    :cell-style="cellStyleFn"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                      width="50"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column label="名称" align="center" prop="name">
                    </el-table-column>

                    <el-table-column
                      prop="wechat_name"
                      label="微信昵称"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="status"
                      label="状态"
                      align="center"
                      :formatter="formatterStatusFn"
                    ></el-table-column>
                    <el-table-column label="操作" itemprop="" align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="danger"
                          @click="deleteFn(scope.$index, scope.row)"
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="examiner_manager_pagination">
                    <el-pagination
                      @size-change="listSizeChange"
                      @current-change="listCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    >
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row v-else>
              <el-empty description="暂无数据"></el-empty>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="管理员申请列表" name="pendingReview">
          <div class="examiner_manager_content">
            <!-- 数据列表 -->
            <div
              v-if="reviewlistData != undefined && reviewlistData.length > 0"
            >
              <el-row>
                <el-col :span="24">
                  <el-table
                    :data="reviewlistData"
                    border
                    size="mini"
                    style="width: 100%"
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                      width="50"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column label="名称" align="center" prop="name">
                    </el-table-column>

                    <el-table-column
                      prop="wechat_name"
                      label="微信昵称"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column label="操作" itemprop="" align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="primary"
                          @click="agreeBtn(scope.$index, scope.row)"
                          >同意</el-button
                        >
                        <el-button
                          size="mini"
                          type="danger"
                          @click="rejectBtn(scope.$index, scope.row)"
                          >拒绝</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="examiner_manager_pagination">
                    <el-pagination
                      @size-change="reviewListSizeChange"
                      @current-change="reviewListCurrentChange"
                      :current-page="reviewCurrentPage"
                      :page-sizes="reviewPageSizes"
                      :page-size="reviewPageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="reviewTotal"
                    >
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row v-else>
              <el-empty description="暂无数据"></el-empty>
            </el-row></div
        ></el-tab-pane>
        <el-tab-pane label="考场签到列表" name="signinList">
          <div class="examiner_manager_content">
            <!-- 按钮栏 -->
            <el-row>
              <el-col :span="24">
                <div class="examiner_manager_top">
                  <div style="margin-left: 10px">筛选：</div>
                  <el-select
                    v-model="checkedSignin"
                    placeholder="请选择签到状态"
                    size="mini"
                    @change="checkedSigninChange"
                    :clearable="false"
                  >
                    <el-option
                      v-for="item in checkedSigninList"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    v-model="signinSearchKey"
                    placeholder="请输入"
                    size="mini"
                    style="width: 200px; margin-left: 10px"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="small"
                    style="margin-left: 5px"
                    @click="signinSearchFn()"
                    >搜索</el-button
                  >
                </div>
              </el-col>
            </el-row>
            <!-- 数据列表 -->
            <div
              v-if="signinListData != undefined && signinListData.length > 0"
            >
              <el-row>
                <el-col :span="24">
                  <el-table
                    :data="signinListData"
                    border
                    size="mini"
                    style="width: 100%"
                    :cell-style="signinCellStyleFn"
                  >
                    <el-table-column
                      type="index"
                      label="序号"
                      width="50"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column
                      label="姓名"
                      align="center"
                      prop="stu_name"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="exam_stu_number"
                      label="准考证号"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="stu_identity_number"
                      label="证件号"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="signin"
                      label="签到状态"
                      align="center"
                      :formatter="formatterSigninFn"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="signin_time"
                      label="签到时间"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="score"
                      label="分数"
                      width="100"
                      align="center"
                    >
                    </el-table-column>

                    <el-table-column
                      prop="pass_status"
                      label="通过状态"
                      width="150"
                      align="center"
                      :formatter="formatterPassStatusFn"
                    ></el-table-column>
                  </el-table>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="examiner_manager_pagination">
                    <el-pagination
                      @size-change="signinListSizeChange"
                      @current-change="signinListCurrentChange"
                      :current-page="signinListCurrentPage"
                      :page-sizes="signinListPageSizes"
                      :page-size="signinListPageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="signinListTotal"
                    >
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>
            </div>
            <el-row v-else>
              <el-empty description="暂无数据"></el-empty>
            </el-row></div
        ></el-tab-pane>
      </el-tabs>
    </el-row>
    <!-- 二维码弹窗 -->
    <el-dialog
      :title="qrCodeDialogTitle"
      :visible.sync="qrCodedialogVisible"
      width="320px"
      :before-close="dialogHandleClose"
    >
      <div class="examiner_manager_qrCode">
        <div ref="qrCodeBox"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogHandleClose()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增弹窗 -->
    <el-dialog
      title="添加"
      :visible.sync="addDialogVisible"
      width="30%"
      :before-close="dialogHandleClose"
    >
      <div v-if="addUserListData != undefined && addUserListData.length > 0">
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <el-table
              :data="addUserListData"
              border
              style="width: 100%"
              size="mini"
              max-height="600"
              @selection-change="dialogSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>

              <el-table-column
                prop="wechat_name"
                label="微信名称"
                align="center"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <div class="examiner_manager_pagination">
              <el-pagination
                @size-change="dialogListSizeChange"
                @current-change="dialogListCurrentChange"
                :current-page="dialogCurrentPage"
                :page-sizes="dialogPageSizes"
                :page-size="dialogPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dialogTotal"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row v-else>
        <el-empty description="暂无可选"></el-empty>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogHandleClose()">取 消</el-button>
        <el-button size="small" type="primary" @click="addExaminerBtn()"
          >添 加</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/exam/examinerManager.css" scoped></style>

<script>
import QRCode from "qrcodejs2";

export default {
  name: "ExaminerManager",
  components: {},
  data() {
    return {
      baseUrl: this.$store.state.baseUrl,
      qrCodedialogVisible: false, // 二维码弹窗显示
      qrCodeDialogTitle: "", // 二维码弹窗标题
      examId: "", // 考试id
      tabsActiveName: "examinerList",
      examinerlistData: [], // 管理员列表
      reviewlistData: [], // 审核列表
      currentPage: 1, // 当前页
      pageSizes: [10, 20, 50, 100], // 可选页容量
      pageSize: 10, // 当前页容量
      total: 0, // 总条数
      reviewCurrentPage: 1, // 审核列表当前页
      reviewPageSizes: [10, 20, 50, 100], // 审核列表可选页容量
      reviewPageSize: 10, // 审核列表当前页容量
      reviewTotal: 0, // 审核列表总条数
      statusList: [
        {
          key: 0,
          value: "启用",
        },
        {
          key: 1,
          value: "禁用",
        },
      ], // 发布状态
      addDialogVisible: false, //添加弹窗显示
      addUserListData: [], // 弹窗数据
      dialogCurrentPage: 1, // 弹窗数据当前页
      dialogPageSizes: [10, 20, 50, 100], // 弹窗数据可选页容量
      dialogPageSize: 10, // 弹窗数据当前页容量
      dialogTotal: 0, // 弹窗数据总条数
      dialogSelectList: [], // 已选列表
      signinListData: [], // 已签到列表数据
      signinListCurrentPage: 1, // 已签到列表当前页
      signinListPageSizes: [10, 20, 50, 100], // 已签到列表可选页容量
      signinListPageSize: 10, // 已签到列表当前页容量
      signinListTotal: 0, // 已签到列表总条数
      loadingKey: false,
      loadingText: "",
      checkedSignin: 0, // 签到状态筛选
      checkedSigninList: [
        {
          key: 0,
          value: "全部",
        },
        {
          key: 1,
          value: "未签到",
        },
        {
          key: 2,
          value: "已签到",
        },
      ],
      signinSearchKey: "", // 签到搜索关键词
      resultsStatusList: [
        {
          key: 1,
          value: "不合格",
        },
        {
          key: 2,
          value: "合格",
        },
        {
          key: 3,
          value: "良好",
        },
        {
          key: 4,
          value: "优秀",
        },
      ], // 成绩状态列表
    };
  },
  created: function () {
    let params = this.$route.params;
    if (JSON.stringify(params) != "{}") {
      this.$store.commit("set_examinerManagerParams", params);
    }
    if (params.id != undefined && params.id != "") {
      this.examId = params.id;
    } else {
      this.examId = this.$store.state.examinerManagerParams.id;
    }

    this.getListDataFn();
  },
  methods: {
    // 生成二维码
    createQRCodeFn: function (url) {
      let that = this;
      return new Promise(function (resolve) {
        setTimeout(function () {
          let text = that.baseUrl + url;
          let qrcodejs2 = new QRCode(that.$refs.qrCodeBox, {
            text: text, //二维码内容
            colorDark: "#000000",
            colorLight: "#ffffff",
          });
          console.log(qrcodejs2);
          resolve(true);
        }, 1000);
      });
    },
    // 弹窗关闭
    dialogHandleClose: function () {
      this.qrCodedialogVisible = false;
      this.addDialogVisible = false;
    },
    // 打开二维码弹窗
    openQrCode: function (key) {
      let that = this;
      if (key == 1) {
        this.qrCodeDialogTitle = "管理员申请二维码";
      } else {
        this.qrCodeDialogTitle = "考场管理二维码";
      }
      this.qrCodeDialogKey = key;
      this.qrCodedialogVisible = true;
      this.$nextTick(function () {
        that.$refs.qrCodeBox.innerHTML = "";
        that.$nextTick(function () {
          if (key == 1) {
            that.createQRCodeFn("signin/adminApply?id=" + that.examId);
          } else {
            that.createQRCodeFn("signin/adminHome");
          }
        });
      });
    },
    // 获取审核列表数据
    getReviewlistFn: function () {
      let that = this;
      let url = "/admin/examiner/examinerAuditIndex";
      let data = {
        exam_id: this.examId,
        page: this.reviewCurrentPage,
        perPage: this.reviewPageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.reviewlistData = response.examiner;
            that.reviewTotal = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取管理员列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/admin/examiner/examinerIndex";
      let data = {
        exam_id: this.examId,
        page: this.currentPage,
        perPage: this.pageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.examinerlistData = response.examiner;
            that.total = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取签到列表数据
    getSigninListDataFn: function () {
      let that = this;
      let url = "/admin/exam/signinIndex";
      let data = {
        exam_id: this.examId,
        page: this.signinListCurrentPage,
        perPage: this.signinListPageSize,
        signinStatus: this.checkedSignin,
        keywords: this.signinSearchKey,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.signinListData = response.enroll_info;
            that.signinListTotal = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取弹窗数据
    getDialogListFn: function () {
      let that = this;
      let url = "/admin/examiner/selectExaminer";
      let data = {
        exam_id: this.examId,
        page: this.dialogCurrentPage,
        perPage: this.dialogPageSize,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.addUserListData = response.examiner;
            that.dialogTotal = response.total_count;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 同意
    agreeBtn: function (index, row) {
      let id = row.id;
      this.reviewFn(id, 2);
    },
    // 拒绝
    rejectBtn: function (index, row) {
      let id = row.id;
      this.reviewFn(id, 1);
    },
    // 管理员审核
    reviewFn: function (id, key) {
      let that = this;
      let url = "/admin/examiner/audit";
      let data = {
        id: id,
        status: key,
      };
      that.loadingText = "处理中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.$message.success("操作成功");
            let next = that.reviewCurrentPage - 1;
            if (that.reviewlistData.length == 1) {
              that.reviewCurrentPage = next >= 1 ? next : 1;
            }
            that.getReviewlistFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 新增
    addFn: function () {
      this.dialogCurrentPage = 1;
      this.dialogPageSize = 10;
      this.addDialogVisible = true;
      this.$nextTick(function () {
        this.getDialogListFn();
      });
    },
    // 弹框列表选择改变
    dialogSelectionChange: function (val) {
      this.dialogSelectList = val;
    },
    // 弹窗添加
    addExaminerBtn: function () {
      let that = this;
      let url = "/admin/examiner/examAddAdmin";
      let list = [];
      this.dialogSelectList.forEach(function (item) {
        list.push(item.id);
      });
      let data = {
        exam_id: this.examId,
        examiner_ids: list.join(","),
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.$message.success("添加成功");
            that.dialogHandleClose();
            that.currentPage = 1;
            that.getListDataFn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 删除
    deleteFn: function (index, row) {
      let that = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/examiner/examDeleteAdmin";
        let data = {
          id: row.id,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("删除成功");
              let next = that.currentPage - 1;
              if (that.examinerlistData.length == 1) {
                that.currentPage = next >= 1 ? next : 1;
              }
              that.getListDataFn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 页容量改变
    listSizeChange: function (val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getListDataFn();
    },
    // 当前页改变
    listCurrentChange: function (val) {
      this.currentPage = val;
      this.getListDataFn();
    },
    // 审核列表页容量改变
    reviewListSizeChange: function (val) {
      this.reviewCurrentPage = 1;
      this.reviewPageSize = val;
      this.getReviewlistFn();
    },
    // 审核列表当前页改变
    reviewListCurrentChange: function (val) {
      this.reviewCurrentPage = val;
      this.getReviewlistFn();
    },
    // 弹框页容量改变
    dialogListSizeChange: function (val) {
      this.dialogCurrentPage = 1;
      this.dialogPageSize = val;
      this.getDialogListFn();
    },
    // 弹框当前页改变
    dialogListCurrentChange: function (val) {
      this.dialogCurrentPage = val;
      this.getDialogListFn();
    },
    // 已签到列表页容量改变
    signinListSizeChange: function (val) {
      this.signinListCurrentPage = 1;
      this.signinListPageSize = val;
      this.getSigninListDataFn();
    },
    // 已签到列表当前页改变
    signinListCurrentChange: function (val) {
      this.signinListCurrentPage = val;
      this.getSigninListDataFn();
    },
    // 状态格式化
    formatterStatusFn: function (row) {
      let status = row.status;
      let text = "";
      this.statusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
        }
      });
      return text;
    },
    // 设置单元格字体颜色
    cellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 3) {
        if (row.status == 1) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
    // 设置签到列表单元格字体颜色
    signinCellStyleFn: function ({ row, columnIndex }) {
      let style = "";
      if (columnIndex == 4) {
        if (row.signin == 1) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      if (columnIndex == 7) {
        if (row.pass_status == 1) {
          style = "color: #F6705E";
        } else {
          style = "color: #8ECF5F";
        }
      }
      return style;
    },
    // 标签切换
    handleClick: function (tab) {
      if (tab.name == "examinerList") {
        this.getListDataFn();
      } else if (tab.name == "pendingReview") {
        this.getReviewlistFn();
      } else {
        this.getSigninListDataFn();
      }
    },
    // 考试等级格式化
    formatterSigninFn: function (row) {
      let signin = row.signin;
      let text = "";
      if (signin == 1) {
        text = "否";
      } else {
        text = "是";
      }
      return text;
    },
    // 筛选切换
    checkedSigninChange: function (val) {
      this.checkedSignin = val;
      this.signinListCurrentPage = 1;
      this.getSigninListDataFn();
    },
    // 签到搜索
    signinSearchFn: function () {
      this.signinListCurrentPage = 1;
      this.getSigninListDataFn();
    },
    // 通过状态格式化
    formatterPassStatusFn: function (row) {
      let status = row.pass_status;
      let key = row.status;
      let text = "";
      if (key == 1) {
        text = "未录入";
      } else {
        this.resultsStatusList.forEach(function (item) {
          if (item.key == status) {
            text = item.value;
          }
        });
      }
      return text;
    },
  },
};
</script>
